<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>保姆</title>
<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/index.css" rel="stylesheet">
<script type="text/javascript">
	function delUser(userId){
		if(confirm("是否删除")){
			window.location.href="user.do?method=delUser&id="+userId;
		}
	}
	function findUser(userId){
		$(".Msg").text("");
		$.ajax({
			type:"post",
			url:"user.do?method=findUser",
			data:{"id":userId},
			success:function(data){
				var dataObj = eval("("+data+")");    
				$("#id").val(dataObj.user_id);
				$("#username").val(dataObj.username);
				$("#realname").val(dataObj.realname);
				$("#address").val(dataObj.address);
				$("#tel").val(dataObj.tel);
			}
		});	
	}
	function updUser(userId){
		window.location.href="user.do?method=findUserById&id="+userId;
	}
	function pdNum(maxn){
		var num = $("#numtxt").val();
		if(num < 1){
			num = 1;
		}else if(num > maxn){
			num=maxn;
		}
		//window.location.href='user.do?method=selectUserPage&pageNo='+num;
		$("#sendNum a").prop("href",'nanny.do?method=selectNannyPage&pageNo='+num);
	}
	function findOne(){
		var name = $("#findUser").val();
		window.location.href="user.do?method=findOne&username="+name;	
	}
	function clearSession(){
		window.location.href="login.jsp";
	}
	function clMsg(){
		$(".Msg").text("");
	}
</script>
</head>
<body>
		<div id="container">
			<div id="by">
				<div id="top" class="jumbotron text-center">
					<div id="t-before">
						<span style="font-size:40px;">欢迎来到zzg管理平台</span>
					</div>
					<div id="t-last">
						<button class="btn btn-link" style="float: right;font-size:17px;color: #EEEEEE;margin-top:15px;" onclick="clearSession()">注销</button>
						<h3 style="float: right;margin-right:20px;">当前用户:${Manage.name}</h3>
					</div>
				</div>
				<div id="cen">
					<div id="c-left">
						<ul class="nav nav-pills nav-stacked">
							<li><a href="user.do?method=selectUserPage">用户管理</a></li>
							<li class="active"><a href="nanny.do?method=selectNannyPage">保姆管理</a></li>
							<li><a href="#">工作管理</a></li>
						</ul>
					</div>
					<div id="c-right" style="overflow-y:auto;">
						<div id="c-right-body">
							<table class="table table-hover table-striped table-bordered">
								<caption>
									<h4 style="display:inline">用户管理表</h4>
									<button class="btn-primary" data-toggle="modal" data-target="#addUser" data-backdrop="false"  style="float:right;" onclick="clMsg()">添加用户</button>
									<button class="btn"  style="float:right;margin-right:30px;" onclick="findOne()">查询用户</button>
									<input id="findUser" style="float:right;margin-top:4px;margin-right:5px;" type="text" placeholder="请输入关键词">
								</caption>
								<thead>
									<tr>
										<th>编号</th>
										<th>照片</th>
										<th>保姆姓名</th>
										<th>年龄</th>
										<th>性别</th>
										<th>学历</th>
										<th>地址</th>
										<th>电话</th>
										<th>薪资</th>
										<th>状态</th>
										<th>工作类别</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="nanny" items="${page.data}">
										<tr>
											<td>${nanny.nanny_id}</td>
											<td><img style="width:30px;height:30px;" src="image/${nanny.picture}"></td>
											<td>${nanny.name}</td>
											<td>${nanny.age}</td>
											<td>${nanny.gender}</td>
											<td>${nanny.edu}</td>
											<td>${nanny.address}</td>
											<td>${nanny.tel}</td>
											<td>${nanny.salary}</td>
											<td>${nanny.status}</td>
											<td>${nanny.nanny_type}</td>
											<td>
											<button class="btn btn-primary" data-toggle="modal" data-target="#updUser" data-backdrop="false" onclick="findUser(${nanny.nanny_id})">更新</button>
											<button class="btn btn-info" onclick="delUser(${nanny.nanny_id})">删除</button>
										</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
							<ul class="pagination" style="float:right">
								<li><a href="nanny.do?method=selectNannyPage&pageNo=1">首页</a></li>
								<c:if test="${page.currentPage > 1}">
									<li id="older"><a href="nanny.do?method=selectNannyPage&pageNo=${page.currentPage-1}">上一页</a></li>
								</c:if>
								<li class="active"><a href="#">${page.currentPage}</a></li>
								<c:if test="${page.currentPage < page.pageCount}">
									<li id="newer"><a href="nanny.do?method=selectNannyPage&pageNo=${page.currentPage+1}">下一页</a></li>
								</c:if>
								<li><a href="nanny.do?method=selectNannyPage&pageNo=${page.pageCount}">尾页</a></li>
								<li><span> 共${page.pageCount}页</span></li>
								<li style="margin-top:10px;margin-left:10px">
									<input id="numtxt" type="number" maxlength="3" style="width:55px;height:30px;padding:5px">
									页&nbsp;
								</li>
								<li id="sendNum" style="float:right" onclick="pdNum(${page.pageCount})">
									<a>跳转</a>
									<!--<input type="submit" value="跳转">  -->
								</li>
							</ul>
						</div>
					</div>
				</div>
				
				<!--
               		更新保姆的模态框
                -->
                <div class="modal fade" id="updUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h3 class="modal-title text-center" id="myModalLabel">修改用户信息</h3>
				            </div>
				            <form action="user.do?method=updUser" method="post">
					            <div class="modal-body">
									<div style="padding: 40px 100px 10px;">
											<p class="Msg"></p>
									    	<div class="input-group input-group-lg">
									            <span class="input-group-addon">编号&emsp;&emsp;</span>
									            <input id="id" type="text" readonly="readonly" class="form-control" name="id" value="${user.user_id}">
									        </div>
									        <br>
									        <div class="input-group input-group-lg">
									            <span class="input-group-addon">用户名 &nbsp;&nbsp;</span>
									            <input id="username" type="text" class="form-control" name="username" value="${user.username}">
									        </div>
									        <br>
									       <div class="input-group input-group-lg">
									            <span class="input-group-addon">真实姓名</span>
									            <input id="realname" type="text" class="form-control" name="realname" value="${user.realname}">
									        </div>
									        <br>
									       <div class="input-group input-group-lg">
									            <span class="input-group-addon">地址&emsp;&emsp;</span>
									            <input id="address" type="text" class="form-control" name="address" value="${user.address}">
									        </div>
									        <br>
									        <div class="input-group input-group-lg">
									            <span class="input-group-addon">电话&emsp;&emsp;</span>
									            <input id="tel" type="text" class="form-control" name="tel">
									        </div>
									        <script type="text/javascript">
												$("#username").blur(function(){
													var val =$(this).val().trim();
														if(val !=""){
															$(".Msg").css("color","blue").text("用户名可用");
															$("#updbtn").show();
														}else{
															$(".Msg").css("color","red").text("用户名不可用！");
															$("#updbtn").hide();
														}
												})
											</script>
									</div>
					            </div>
					            <div class="modal-footer">
					                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					                <input id="updbtn" type="submit" class="btn btn-primary" value="提交更改"></input>
					            </div>
				            </form>
				        </div>
				    </div>
				</div>
				<!-- 
					添加用户的模态框 
				-->
				<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h3 class="modal-title text-center" id="myModalLabel">添加用户</h3>
				            </div>
				            <form action="user.do?method=addUser" method="post">
					            <div class="modal-body">
									<div style="padding: 40px 100px 10px;">
											<p class="Msg"></p>
											<!-- <th>编号</th>
											<th>照片</th>
											<th>保姆姓名</th>
											<th>年龄</th>
											<th>性别</th>
											<th>学历</th>
											<th>地址</th>
											<th>电话</th>
											<th>薪资</th>
											<th>状态</th>
											<th>工作类别</th>
											<th>操作</th>
											<td>${nanny.nanny_id}</td>
											<td><img style="width:30px;height:30px;" src="image/${nanny.picture}"></td>
											<td>${nanny.name}</td>
											<td>${nanny.age}</td>
											<td>${nanny.gender}</td>
											<td>${nanny.edu}</td>
											<td>${nanny.address}</td>
											<td>${nanny.tel}</td>
											<td>${nanny.salary}</td>
											<td>${nanny.status}</td>
											<td>${nanny.nanny_type}</td> -->
									        <div class="input-group input-group-lg">
									            <span class="glyphicon glyphicon-user input-group-addon"></span>
									            <input id="addusername" type="text" class="form-control" name="username" placeholder="请输入用户名">
									        </div>
									        <br>
									       <div class="input-group input-group-lg">
									            <span class="glyphicon glyphicon-print input-group-addon"></span>
									            <input type="text" class="form-control" name="realname" placeholder="请输入姓名">
									        </div>
									        <br>
									       <div class="input-group input-group-lg">
									            <span class="glyphicon glyphicon-home input-group-addon"></span>
									            <input type="text" class="form-control" name="address" placeholder="请输入地址">
									        </div>
									        <br>
									        <div class="input-group input-group-lg">
									            <span class="glyphicon glyphicon-earphone input-group-addon"></span>
									            <input type="text" class="form-control" name="tel" placeholder="请输入电话">
									        </div>
									</div>
					            </div>
					            		<script type="text/javascript">
											$("#addusername").blur(function(){
												var val =$(this).val().trim();
												$.post("user.do?method=checkUsername",
														{username:$(this).val()},
														function(text){
															if(text=='true'&&val !=""){
																$(".Msg").css("color","blue").text("用户名可用");
																$("#addbtn").show();
															}else{
																$(".Msg").css("color","red").text("用户名不可用！");
																$("#addbtn").hide();
															}
														})
											});
										</script>
					            <div class="modal-footer">
					                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					                <input id="addbtn" type="submit" class="btn btn-primary" value="提交"></input>
					            </div>
				            </form>
				        </div>
				    </div>
				</div>
			</div><!-- by -->
		</div><!-- container -->
</body>
</html>